<template>
  <div style="position: relative; width: 100%; height: 100%; overflow: hidden" title="双击放大视频">
    <object
      :key="streamUrl"
      type="application/x-vlc-plugin"
      width="100%"
      height="100%"
      style="
        position: absolute;
        z-index: 9999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: fill;
        object-fit: fill;
        overflow: hidden;
      "
    >
      <param name="mrl" :value="streamUrl" />
      <param name="autoplay" :value="autoplay" />
      <param name="volume" :value="50" />
      <param name="loop" :value="false" />
      <param name="fullscreen" :value="true" />
      <param name="controls" :value="false" />
      <param name="bgcolor" value="rgba(11, 26, 38, 0.97)" />
      <param name="text" value="视频播放失败" />
    </object>
  </div>
</template>

<script>
export default {
  name: 'VlcWebPluginPlayer',
  inheritAttrs: false,
  props: {
    autoplay: { type: Boolean, default: true },
    streamUrl: { type: String, default: '' },
  },
};
</script>
